<template>
    <div>
        <pagetitle type="2"></pagetitle>
        <el-card>
            <div class="tabtop">
                <div class="tabtopr">
                    <div class="tabtoprl">
                        到期时间
                        <div class="tabtoprlItem">30天内</div>
                        <div class="tabtoprlItem">15天内</div>
                        <div class="tabtoprlItem">7天内</div>
                        <div class="tabtoprlItem">自定义时间</div>
                    </div>
                    <div class="tabtoprl">
                        状态
                        <div class="tabtoprlItem">使用中</div>
                        <div class="tabtoprlItem">已过期</div>
                        <div class="tabtoprlItem">已冻结</div>
                        <el-checkbox v-model="checked1" label="隐藏有待支付订单的资源" style="margin-left: 20px" size="large" />
                    </div>
                </div>
            </div>
            <el-input v-model="input3" placeholder="搜索">
                <template #prefix>
                    <el-icon class="el-input__icon"><Search /></el-icon>
                </template>
            </el-input>
        </el-card>
        <el-card style="margin-top: 20px">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="手动续费项（0）" name="first">
                    <div class="tabtop">
                        <div class="tabtopr">
                            <div class="tabtoprl">
                                <el-button type="info" style="margin-left: 0" plain>批量续费</el-button>
                                <el-button type="info" plain>设为自动续费</el-button>
                                <el-button type="info" plain>到期不续费</el-button>
                                <el-button type="info" plain>批量导出</el-button>
                            </div>
                        </div>
                        <div>
                            <el-button type="primary" link>一键导出（0）条</el-button>
                            <el-button>
                                <el-icon class="el-input__icon"><RefreshRight /></el-icon>
                            </el-button>
                        </div>
                    </div>
                    <el-table :data="[{}]" style="width: 100%">
                        <el-table-column type="selection" width="55" />
                        <el-table-column prop="date" label="名称/ID" />
                        <el-table-column prop="name" label="产品类型/规格" />
                        <el-table-column prop="name" label="区域" />
                        <el-table-column prop="name" label="开通/到期时间" />
                        <el-table-column prop="name" label="状态" />
                        <el-table-column prop="name" label="倒计时" />
                        <el-table-column prop="name" label="操作" />
                    </el-table>
                </el-tab-pane>
                <el-tab-pane label="自动续费项（0）" name="second">自动续费项（0）</el-tab-pane>
                <el-tab-pane label="到期项（0）" name="second">到期项</el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>
<script setup lang="ts">
const activeName = "first";
</script>
<style scoped lang="scss">
.tabtop {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .tabtopr {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        .tabtoprl {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-right: 20px;
            .tabtoprlItem {
                height: 32px;
                line-height: 32px;
                background: #f1f1f1;
                margin-left: 5px;
                padding: 0 15px;
                cursor: pointer;
            }
        }
        button {
            margin-left: 20px;
        }
    }
}
</style>
